<template>
  <div class="medov-rank3-container" :style="{ width: width ? `${width}px` : '100%', height: height ? `${height}px` : '100%' }">
    <div class="rank-item" v-for="(item, index) in rankList" :key="index">
      <div class="font" :style="'width:' + item.per + '%'">
        <div>
          <div class="model" :class="'model' + (index + 1)">
            <div class="model-font">{{ (index === 3 || index === 4) ? index + 1 : ''}}</div>
          </div>
          <div class="name">{{item.name}}</div>
        </div>
        <div>
          <div class="value">{{ item.value }}</div>
          <span class="unit">{{ item.unit }}</span>
        </div>
      </div>
      <div class="line-bg">
        <div class="line" :style="'width:' + item.per + '%'">
          <div class="inner-circle"></div>
          <div class="inner-circle2"></div>
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 387,
      height: 381,
      data: [],
    })
  }
});

// 响应式状态
const width = ref(387);
const height = ref(381);
const rankList = ref([]);

// 监听 options 变化
watch(() => props.options, (value) => {
  if (value.width) {
    width.value = value.width;
  }
  if (value.height) {
    height.value = value.height;
  }
  if (value.data && value.data.length > 0) {
    rankList.value = value.data;
  }
}, {
  immediate: true,
  deep: true
});
</script>

<style lang="less">
.medov-rank3-container {
  padding: 0 10px 0 0;
  display: flex;
  flex-direction: column;

  .rank-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;

    &:nth-of-type(odd) {
      .line-bg {
        width: 90%;
      }

      .line {
        height: 6px;
        position: relative;
        background: linear-gradient(244deg,#0084ff 0%,rgb(255 255 255 / 0%) 100%) !important;

        .inner-circle {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 9px;
          height: 9px;
          background: #a5e8ff;
          border-radius: 50%;
        }

        .inner-circle2 {
          position: absolute;
          top: -7px;
          right: -7px;
          width: 15px;
          height: 15px;
          border: 2px solid #a5e8ff;
          opacity: 0.1;
          border-radius: 50%;
        }

        .circle {
          position: absolute;
          right: -12px;
          top: -12px;
          width: 25px;
          height: 25px;
          border: 2px solid #a5e8ff;
          opacity: 0.1;
          border-radius: 50%;
        }
      }
    }

    &:nth-of-type(even) {
      .line-bg {
        width: 90%;
      }

      .line {
        height: 6px;
        background: linear-gradient(244deg,#65e3ac 0%,rgb(255 255 255 / 0%) 100%);
        position: relative;

        .inner-circle {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 9px;
          height: 9px;
          background: #8effce;
          border-radius: 50%;
        }

        .inner-circle2 {
          position: absolute;
          top: -7px;
          right: -7px;
          width: 15px;
          height: 15px;
          border: 2px solid #8effce;
          opacity: 0.1;
          border-radius: 50%;
        }

        .circle {
          position: absolute;
          right: -12px;
          top: -12px;
          width: 25px;
          height: 25px;
          border: 2px solid #8effce;
          opacity: 0.1;
          border-radius: 50%;
        }
      }
    }

    .model {
      margin-right: 13px;

      .model-font {
        width: 22px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        display: block;
      }
    }

    .model1 {
      width: 22px;
      height: 25px;
      background: url('./images/rank3/gold.png');
      background-size: 100% 100%;
    }

    .model2 {
      width: 22px;
      height: 25px;
      background: url('./images/rank3/silver.png');
      background-size: 100% 100%;
    }

    .model3 {
      width: 23px;
      height: 26px;
      background: url('./images/rank3/copper.png');
      background-size: 100% 100%;
    }

    .model4 {
      width: 22px;
      height: 22px;
      background: #1885f1;
      border-radius: 50%;
    }

    .model5 {
      width: 22px;
      height: 22px;
      background: #1885f1;
      border-radius: 50%;
    }

    .font {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      min-width: 200px;

      div {
        display: flex;
      }

      .name {
        font-size: 18px;
        font-weight: 400;
        color: #fff;
      }

      .value {
        font-size: 24px;
        font-family: DIN;
        font-weight: bold;
        color: #feffff;
        margin-right: 6px;
        line-height: 20px;
      }

      .unit {
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        line-height: 25px;
      }
    }
  }
}
</style>